import Taro, { Component } from '@tarojs/taro'
import PropTypes from 'prop-types'
import { View, Image, Text } from '@tarojs/components'
import checked_img from '@/assets/checked.png'
import checked_off_img from '@/assets/checked_off.png'
import './index.scss'


/**
 * 	单选，多选
 * @param	title: '保存'
 * @param	height: 'auto'
 * @param	sLeft: true
 * @param	checked: false
 * @param	jsContent: 'flex-start'
 */
class RadioItem extends Component {

	static propTypes = {
		title: PropTypes.string,
		checked: PropTypes.bool,
		isLeft: PropTypes.bool,
		height: PropTypes.oneOfType([
			PropTypes.string,
			PropTypes.number
		]),
		jsContent: PropTypes.string,
		size: PropTypes.oneOfType([
			PropTypes.string,
			PropTypes.number
		]),
		onClick: PropTypes.func,
	}

	static defaultProps = {
		title: '保存',
		height: 'auto',
		isLeft: true,
		checked: false,
		jsContent: 'flex-start',
		size: '13PX'
	}

	constructor(props){
		super(props)
		this.state = {}
	}

	render(){
		const { title, checked, isLeft, height, jsContent, size } = this.props

		return(
			<View className='custom-radio-item' style={{justifyContent: jsContent, height: height }} onClick={this.toClickItem}>
				{isLeft && <Image className='custom-radio-item-img' src={checked? checked_img : checked_off_img}></Image>}
				<View style={{fontSize: size}}>{title}</View>
				{!isLeft && <Image className='custom-radio-item-img' src={checked? checked_img : checked_off_img}></Image>}
			</View>
		)
	}

	toClickItem = () => {
		const { onClick } = this.props
		onClick && onClick()
	}
}

export default RadioItem